<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold">{{ $t("page.footer.aboutus") }}</h1>
        <van-icon
          class="cursor-pointer close-icon"
          @click="backPage"
          name="cross"
        />
      </div>
      <div class="responsive-layout">
        <div class="sidebar font-semibold mb-6 md:mb-0 rounded text-sm">
          <button
            v-for="(item, index) in tabData"
            @click="changeActiveTab(item)"
            :class="activeTab === item.id ? 'active-tab' : ''"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white rounded-none"
          >
            {{ $t(item.name) }}
          </button>
        </div>

        <select
          class="sidebar-2 bg-[#0f212e] p-4 mb-2 rounded"
          v-model="tabSelected"
          @change="selectChange"
        >
          <option :value="item.id" v-for="(item, index) in tabData">
            {{ $t(item.name) }}
          </option>
        </select>
        <div class="content w-full bg-[#0f212e] p-4 rounded-md">
          <!-- 隐私政策 -->
          <div v-if="activeTab === 'tab1'">
            <div v-html="main.privacy_policy"></div>
          </div>
          <!--  -->
          <div v-if="activeTab === 'tab2'">
            <div
              class="w-full mx-auto bg-[#0f212e] rounded-lg text-[#b1bac9]"
            ></div>
          </div>
          <!-- 反洗钱政策  -->
          <div v-if="activeTab === 'tab3'">
            <div v-html="main.anti_money"></div>
          </div>
          <!-- 服务条款 -->
          <div v-if="activeTab === 'tab4'">
            <div v-html="main.service_contract"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { mainAct } from "@/store/activeda";
import { hallIntro } from "@/api/casion.js";
const main = mainAct();
const { locale } = useI18n();
const router = useRouter();
const activeTab = ref("tab1");

onMounted(() => {
  // main.gethallIntro();
});

const changeActiveTab = item => {
  activeTab.value = item.id;
  tabSelected.value = item.id;
  // switch (item.id) {
  //   case "tab1":
  //     break;
  //   case "tab3":
  //     break;
  //   case "tab4":
  //     break;
  // }
};

const tabData = [
  {
    name: "page.footer.PrivacyPolicy",
    id: "tab1"
  },
  {
    name: "page.footer.AMLPolicy",
    id: "tab3"
  },
  {
    name: "page.footer.TermsofService",
    id: "tab4"
  }
];

const backPage = () => {
  router.go(-1);
};
const tabSelected = ref("tab1");
const selectChange = () => {
  activeTab.value = tabSelected.value;
};
watch(
  () => main.aboutusTab,
  () => {
    console.log("监听点击关于我们", main.aboutusTab);
    if (
      main.aboutusTab != null &&
      main.aboutusTab != undefined &&
      main.aboutusTab != ""
    ) {
      activeTab.value = main.aboutusTab;
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scoped lang="less">
@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }
  .sidebar-2 {
    display: none !important;
  }
  .responsive-layout .sidebar {
    width: 220px;
    height: 300px;

    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    position: sticky;
    top: 2rem;
    padding: 0;
    display: block;
    .btn {
      width: 220px;

      background-color: #0f212e;
      border-radius: 0;
      text-align: left;
    }
  }
  .responsive-layout .content {
    // flex-grow: 1;
  }
  .active-tab {
    background-color: #071824 !important;
    border-left: 3px solid #1475e1 !important;
  }
}
.content {
  overflow: auto;
  table {
    min-width: 900px;
  }
}
.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  padding: 0.5rem;
  display: none;
  .btn {
    width: 220px;
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 3px solid #071824;
  }
}

.sidebar-2 {
  display: block;
}
.active-tab {
  background-color: #2f4553;
}
.ipt-dark {
  background-color: #0f212e;
  border: 2px solid #2f4553;
}
.ipt-dark:hover {
  border-color: #557086;
}
.close-icon:hover {
  color: white;
}
.close-icon {
  font-size: 18px;
  color: #b1bad3;
}
:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #0f212e;
  padding: 0;
  .btn {
    border: unset;
    outline: unset;
  }
}
:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}
h2,
h1 {
  color: #fff;
  margin-top: 0;
}
</style>
